import React, { Component } from 'react'
import {connect} from 'react-redux'
import {CarProduct} from '../../../types/products'
import CarProductItem from '../../../components/carProduct'

interface IProps{
    carList:CarProduct[],
    checkAll:boolean,
    changeChecked:(checkAll:boolean) => void,
    total:number
}

class Car extends Component <IProps>{
    render() {
        let {carList,checkAll,total} = this.props;
        return (
            <div>
                购物车
                {carList.length && carList.map(item => <CarProductItem item={item} key={item.id}></CarProductItem>)}
                <input type="checkbox" checked={checkAll} onChange={() => {
                    this.props.changeChecked(!checkAll)
                }}/>
                {total}
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        carList:state.list.carList,
        checkAll:state.list.checkAll,
        total:state.list.total
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        changeChecked(checkAll:boolean){
            dispatch({type:'CHANGE_ALL',checkAll})
        }
    }
}
export default connect(stateMapToProps,dispatchMapToProps)(Car)